// 组织管理项目选择
<template>

    <div class="organization-select" :style='winH'>
        
        <div class="departments">
            <l-departemnt-list :companys='companys' @select='selectDepartment'></l-departemnt-list>
        </div>
        <div class="member">
            <l-member-manage :data='personalList' @select='selectPersonal'></l-member-manage>
        </div>
        
    </div>

</template>

<script lang='ts'>
import {Component, Prop, Vue} from 'vue-property-decorator'
import {store} from '@/store/index'
import v from '@/../static/v.mp4'

const departmentList = () => import('@/components/ivew_components/organization_select/department_list/index.vue');
const memberManage = () => import('@/components/ivew_components/organization_select/member-manage/index.vue');

@Component({
    components:{
        'l-departemnt-list': departmentList,
        'l-member-manage': memberManage
    }
})
export default class organizationSelect extends Vue{
    name:string = 'organizations-select'

    // 人员列表
    @Prop()
    personalList

    // 公司部门列表
    @Prop()
    companys

    @Prop()
    height:number

    // 部门选择
    selectDepartment(data){
        store.dispatch('organizationStore/updataPersonalList', data)
    }

    // 人员选择
    selectPersonal(data){
        store.dispatch('organizationStore/departmentEventIssue', {data, action:'edit', type:'personal'})
    }

    // 窗口高度
    get winH(){
        
        let val = this.height || store.getters['mainStore/winH']
        
        return {
            height: `${val}px`
        }
    }
    

    // 请求初始数据
    created (){
        store.dispatch('organizationStore/initOrganization').then(success =>{})
    }

}


</script>

<style scoped lang='scss'>

.organization-select{
    display: flex;

    .departments{
        height: 100%;
    }

    .member{
        margin-left: _intervals(2);
    }
}


</style>